<template>
  <ScreenAdapter
    :design-width="1920"
    :design-height="1080"
    :mode="currentMode"
    :debug="false"
    :fullscreen="true"
    loading-text="数据大屏加载中..."
    @ready="onScreenReady"
    @scale-change="onScaleChange"
    @error="onError"
  >
    <!-- 自定义加载状态 -->
    <template #loading="{ loadingText }">
      <div class="custom-loading">
        <div class="loading-animation">
          <div class="pulse-ring"></div>
          <div class="pulse-ring pulse-ring-delay"></div>
        </div>
        <h3>{{ loadingText }}</h3>
        <p>正在初始化数据连接...</p>
      </div>
    </template>

    <!-- 主要内容区域 -->
    <div class="large-screen-content" :class="{ 'content-ready': isContentReady }">
      <!-- 顶部标题栏 -->
      <header class="screen-header">
        <div class="header-left">
          <h1 class="screen-title">数据监控大屏</h1>
          <span class="screen-subtitle">实时数据展示系统</span>
        </div>
        <div class="header-right">
          <div class="current-time">{{ currentTime }}</div>
          <div class="control-buttons">
            <button @click="toggleMode" class="control-btn">
              {{ currentMode === "fit" ? "适应" : "缩放" }}
            </button>
            <button @click="toggleDebug" class="control-btn">
              {{ showDebug ? "隐藏" : "调试" }}
            </button>
            <button @click="refreshData" class="control-btn">刷新</button>
          </div>
        </div>
      </header>

      <!-- 主要内容区域 -->
      <main class="screen-main">
        <!-- 原有的6个区块 -->
        <div class="content-grid">
          <div class="grid-item item-1" v-for="(item, index) in dataItems" :key="index">
            <div class="item-header">
              <h3>{{ item.title }}</h3>
              <span class="item-status" :class="item.status">{{ item.statusText }}</span>
            </div>
            <div class="item-content">
              <div class="metric-value">{{ item.value }}</div>
              <div class="metric-unit">{{ item.unit }}</div>
              <div class="metric-trend" :class="item.trend">
                <span class="trend-icon">{{ item.trendIcon }}</span>
                <span class="trend-text">{{ item.trendText }}</span>
              </div>
            </div>
            <div class="item-chart">
              <!-- 这里可以放置图表组件 -->
              <div class="mock-chart" :style="{ height: `${item.chartHeight}%` }"></div>
            </div>
          </div>
        </div>
      </main>

      <!-- 底部状态栏 -->
      <footer class="screen-footer">
        <div class="footer-left">
          <span class="data-update">数据更新时间: {{ lastUpdateTime }}</span>
        </div>
        <div class="footer-right">
          <span class="connection-status" :class="connectionStatus">
            <span class="status-dot"></span>
            {{ connectionStatus === "connected" ? "已连接" : "连接中断" }}
          </span>
        </div>
      </footer>
    </div>
  </ScreenAdapter>
</template>

<script>
import ScreenAdapter from "@/components/ScreenAdapter/index.vue";

export default {
  name: "LargeScreenNew",
  components: {
    ScreenAdapter,
  },
  data() {
    return {
      // 适配相关
      currentMode: "fit",
      showDebug: false,
      isContentReady: false,

      // 时间相关
      currentTime: "",
      lastUpdateTime: "",
      timeTimer: null,

      // 连接状态
      connectionStatus: "connected",

      // 模拟数据
      dataItems: [
        {
          title: "实时访问量",
          value: "12,586",
          unit: "人次",
          status: "normal",
          statusText: "正常",
          trend: "up",
          trendIcon: "↗",
          trendText: "+12.5%",
          chartHeight: 65,
        },
        {
          title: "系统响应时间",
          value: "156",
          unit: "ms",
          status: "warning",
          statusText: "警告",
          trend: "down",
          trendIcon: "↘",
          trendText: "+8.2%",
          chartHeight: 45,
        },
        {
          title: "服务器负载",
          value: "78.5",
          unit: "%",
          status: "normal",
          statusText: "正常",
          trend: "stable",
          trendIcon: "→",
          trendText: "持平",
          chartHeight: 80,
        },
        {
          title: "错误率",
          value: "0.12",
          unit: "%",
          status: "good",
          statusText: "良好",
          trend: "down",
          trendIcon: "↘",
          trendText: "-5.1%",
          chartHeight: 30,
        },
        {
          title: "在线用户",
          value: "2,847",
          unit: "人",
          status: "normal",
          statusText: "正常",
          trend: "up",
          trendIcon: "↗",
          trendText: "+15.7%",
          chartHeight: 75,
        },
        {
          title: "数据处理量",
          value: "847.2",
          unit: "GB",
          status: "normal",
          statusText: "正常",
          trend: "up",
          trendIcon: "↗",
          trendText: "+22.3%",
          chartHeight: 90,
        },
      ],
    };
  },

  methods: {
    // 大屏准备就绪
    onScreenReady(adaptData) {
      console.log("大屏准备就绪:", adaptData);
      this.isContentReady = true;
      this.startDataRefresh();
    },

    // 缩放变化处理
    onScaleChange(adaptData) {
      console.log("缩放变化:", adaptData);
      // 可以在这里根据缩放比例调整某些元素
    },

    // 错误处理
    onError(errorInfo) {
      console.error("大屏错误:", errorInfo);
      this.$message.error("大屏加载失败，请刷新重试");
    },

    // 切换适配模式
    toggleMode() {
      this.currentMode = this.currentMode === "fit" ? "scale" : "fit";
    },

    // 切换调试模式
    toggleDebug() {
      this.showDebug = !this.showDebug;
    },

    // 刷新数据
    refreshData() {
      this.isContentReady = false;

      setTimeout(() => {
        this.updateMockData();
        this.isContentReady = true;
        this.$message.success("数据刷新完成");
      }, 1000);
    },

    // 更新模拟数据
    updateMockData() {
      this.dataItems.forEach((item) => {
        // 随机更新数值
        const baseValue = parseInt(item.value.replace(/,/g, ""));
        const variation = Math.random() * 0.2 - 0.1; // ±10%
        const newValue = Math.round(baseValue * (1 + variation));

        if (item.unit === "%") {
          item.value = (newValue / 100).toFixed(2);
        } else if (item.unit === "ms") {
          item.value = newValue.toString();
        } else {
          item.value = newValue.toLocaleString();
        }

        // 随机更新图表高度
        item.chartHeight = Math.floor(Math.random() * 60) + 30;
      });

      this.lastUpdateTime = new Date().toLocaleString();
    },

    // 更新时间
    updateTime() {
      this.currentTime = new Date().toLocaleString();
    },

    // 开始数据刷新
    startDataRefresh() {
      this.updateTime();
      this.lastUpdateTime = new Date().toLocaleString();

      // 每秒更新时间
      this.timeTimer = setInterval(() => {
        this.updateTime();
      }, 1000);

      // 每30秒更新数据
      setInterval(() => {
        this.updateMockData();
      }, 30000);
    },
  },

  beforeDestroy() {
    if (this.timeTimer) {
      clearInterval(this.timeTimer);
    }
  },
};
</script>

<style lang="less" scoped>
// 自定义加载动画
.custom-loading {
  text-align: center;
  color: #409eff;

  .loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;

    .pulse-ring {
      position: absolute;
      width: 80px;
      height: 80px;
      border: 3px solid #409eff;
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;

      &.pulse-ring-delay {
        animation-delay: 1s;
      }
    }
  }

  h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 500;
  }

  p {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: scale(0.8);
    opacity: 1;
  }
}

// 主要内容样式
.large-screen-content {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;

  &.content-ready {
    opacity: 1;
    transform: translateY(0);
  }
}

// 头部样式
.screen-header {
  height: 80px;
  padding: 0 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  .header-left {
    display: flex;
    align-items: baseline;
    gap: 2vw;

    .screen-title {
      margin: 0;
      font-size: clamp(18px, 2.5vw, 32px);
      font-weight: 600;
      background: linear-gradient(45deg, #67c23a, #409eff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .screen-subtitle {
      font-size: clamp(12px, 1.2vw, 16px);
      opacity: 0.8;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 2vw;

    .current-time {
      font-size: clamp(12px, 1.2vw, 16px);
      font-family: "Courier New", monospace;
      background: rgba(255, 255, 255, 0.1);
      padding: 0.5vw 1vw;
      border-radius: 4px;
    }

    .control-buttons {
      display: flex;
      gap: 1vw;

      .control-btn {
        background: rgba(64, 158, 255, 0.8);
        color: white;
        border: none;
        padding: 0.5vw 1vw;
        border-radius: 4px;
        font-size: clamp(10px, 1vw, 14px);
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(64, 158, 255, 1);
          transform: translateY(-1px);
        }
      }
    }
  }
}

// 主内容区域
.screen-main {
  flex: 1;
  padding: 2vh 3vw;
  overflow: hidden;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2vh 2vw;
  height: 100%;
}

.grid-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1.5vh 1.5vw;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(64, 158, 255, 0.5);
    transform: translateY(-2px);
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1vh;

    h3 {
      margin: 0;
      font-size: clamp(12px, 1.2vw, 16px);
      font-weight: 500;
    }

    .item-status {
      padding: 0.2vh 0.8vw;
      border-radius: 12px;
      font-size: clamp(10px, 0.8vw, 12px);

      &.normal {
        background: rgba(103, 194, 58, 0.2);
        color: #67c23a;
      }

      &.warning {
        background: rgba(230, 162, 60, 0.2);
        color: #e6a23c;
      }

      &.good {
        background: rgba(64, 158, 255, 0.2);
        color: #409eff;
      }
    }
  }

  .item-content {
    margin-bottom: 1vh;

    .metric-value {
      font-size: clamp(20px, 3vw, 36px);
      font-weight: 700;
      line-height: 1;
      margin-bottom: 0.5vh;
    }

    .metric-unit {
      font-size: clamp(10px, 1vw, 14px);
      opacity: 0.7;
      margin-bottom: 1vh;
    }

    .metric-trend {
      display: flex;
      align-items: center;
      gap: 0.5vw;
      font-size: clamp(10px, 0.9vw, 12px);

      &.up {
        color: #67c23a;
      }

      &.down {
        color: #f56c6c;
      }

      &.stable {
        color: #e6a23c;
      }

      .trend-icon {
        font-weight: bold;
      }
    }
  }

  .item-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;

    .mock-chart {
      width: 100%;
      background: linear-gradient(to top, rgba(64, 158, 255, 0.8), rgba(64, 158, 255, 0.2));
      border-radius: 2px;
      transition: height 0.8s ease;
    }
  }
}

// 底部状态栏
.screen-footer {
  height: 50px;
  padding: 0 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(10px, 1vw, 12px);

  .connection-status {
    display: flex;
    align-items: center;
    gap: 0.5vw;

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #67c23a;
      animation: blink 2s infinite;
    }

    &.disconnected .status-dot {
      background: #f56c6c;
    }
  }
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.3;
  }
}

// 响应式适配
@media screen and (max-width: 1366px) {
  .content-grid {
    gap: 1vh 1vw;
  }

  .grid-item {
    padding: 1vh 1vw;
  }
}

@media screen and (max-width: 768px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .screen-header {
    flex-direction: column;
    height: auto;
    padding: 1vh 2vw;
    gap: 1vh;

    .header-left,
    .header-right {
      width: 100%;
      justify-content: center;
    }
  }
}
</style>
